<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
    <script>
        let tem;
        const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

        function Create() {
            tem = "";
            for (let i = 0; i < 4; ++i) {
                const index = Math.floor(Math.random() * 36);
                tem += random[index];
            }
            document.getElementById("in2").value = tem;
        }

        /**
         * @return {boolean}
         */
        function JCode() {
            const cod = document.getElementById("in1").value.toUpperCase();
            if (cod.length <= 0) {
                document.getElementById("ECode").innerHTML = "请输入验证码".fontcolor("red");
                return false;
            }
            else if (cod !== tem) {
                document.getElementById("ECode").innerHTML = "验证码错误".fontcolor("red");
                return false;
            }
            else {
                document.getElementById("ECode").innerHTML = "";
                return true;
            }
        }

        /**
         * @return {boolean}
         */
        function JUsername() {
            const inp = document.getElementById("username1").value;
            const rul = /^[0-9a-zA-Z_]{3,10}$/;
            if (inp === "") {
                document.getElementById("EUsername").innerHTML = "用户名不能为空".fontcolor("red");
                return false;
            }
            else if (inp.length < 3 || inp.length > 10) {
                document.getElementById("EUsername").innerHTML = "用户名长度为3~10位".fontcolor("red");
                return false;
            }
            else if (!rul.test(inp)) {
                document.getElementById("EUsername").innerHTML = "格式错误，应仅由数字、字母和下划线".fontcolor("red");
                return false;
            }
            else {
                document.getElementById("EUsername").innerHTML = "";
                return true;
            }
        }

        /**
         * @return {boolean}
         */
        function JEmail() {
            const inp = document.getElementById("email1").value;
            const rul = /^[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}$/;
            if (inp === "") {
                document.getElementById("EEmail").innerHTML = "电子邮箱不能为空".fontcolor("red");
                return false;
            }
            else if (!rul.test(inp)) {
                document.getElementById("EEmail").innerHTML = "格式错误".fontcolor("red");
                return false;
            }
            else {
                document.getElementById("EEmail").innerHTML = "";
                return true;
            }
        }

        /**
         * @return {boolean}
         */
        function JPassword1() {
            const inp = document.getElementById("password1").value;
            const rul = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/;
            if (inp === "") {
                document.getElementById("EPassword1").innerHTML = "密码不能为空".fontcolor("red");
                return false;
            }
            else if (inp.length < 8 || inp.length > 16) {
                document.getElementById("EPassword1").innerHTML = "密码长度为8~16位".fontcolor("red");
                return false;
            }
            else if (!rul.test(inp)) {
                document.getElementById("EPassword1").innerHTML = "格式错误，必须包含字母、数字、特殊字符".fontcolor("red");
                return false;
            }
            else {
                document.getElementById("EPassword1").innerHTML = "";
                return true;
            }
        }

        /**
         * @return {boolean}
         */
        function JPassword2() {
            const fir = document.getElementById("password1").value;
            const sec = document.getElementById("password2").value;
            if (sec === "") {
                document.getElementById("EPassword2").innerHTML = "请重复输入密码".fontcolor("red");
                return false;
            }
            else if (fir !== sec) {
                document.getElementById("EPassword2").innerHTML = "两次密码不一致".fontcolor("red");
                return false;
            }
            else {
                document.getElementById("EPassword2").innerHTML = "";
                return true;
            }
        }

        function Save() {
            let i;
            if (!JUsername() || !JEmail() || !JPassword1() || !JPassword2() || !JCode()) {
                alert("注册失败");
                return;
            }
            const usn = document.getElementById("username1").value;
            const eml = document.getElementById("email1").value;
            const pwd = document.getElementById("password1").value;
            for (i = 0; i < localStorage.length; ++i) {
                const kna = localStorage.key(i);
                const str = localStorage.getItem(kna);
                const site = JSON.parse(str);
                if (usn === site.usn) {
                    alert("注册失败，用户名已存在");
                    return;
                }
                if (eml === site.eml) {
                    alert("注册失败，此邮箱已注册");
                    return;
                }
            }
            const date = new Date();
            const obj = {usn: usn, eml: eml, pwd: pwd, fDate: date.toLocaleString(), sDate: null, rem: false};
            const str = JSON.stringify(obj);
            localStorage.setItem(eml, str);
            alert("注册成功");
            location.href = "https://yxl76.gitee.io/three_phase/login_success_page.html?=" + eml + "+" + pwd;
        }
    </script>
</head>

<body onload="Create()">
<div class="jumbotron" style="height: 260px;">
    <div class="container" style="text-align: center;">
        <h1><strong>兰陈昕的第三期作业</strong></h1>
        <h2><strong>感受更精彩的世界</strong></h2>
        <p>已有账户<a href="https://yxl76.gitee.io/three_phase/login_page.html"> 点击登录</a></p>
    </div>
</div>
<div style="width: 240px; margin: auto;">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                </span>
                <input type="text" class="form-control" id="username1" placeholder="用户名" onblur="JUsername()">
            </div>
            <span id="EUsername"></span>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                </span>
                <input type="email" class="form-control" id="email1" placeholder="电子邮箱" onblur="JEmail()">
            </div>
            <span id="EEmail"></span>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                </span>
                <input type="password" class="form-control" id="password1" placeholder="密码" onblur="JPassword1()">
            </div>
            <span id="EPassword1"></span>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                </span>
                <input type="password" class="form-control" id="password2" placeholder="请重复输入密码" onblur="JPassword2()">
            </div>
            <span id="EPassword2"></span>
        </div>
        <div>
            <div>
                <input type="text" id="in1" placeholder="验证码" onblur="JCode()">
                <input type="button" id="in2" onclick="Create()">
            </div>
            <span id="ECode"></span>
        </div>
        <br>
        <div style="text-align: center;">
            <p>点击注册即表示您同意并愿意遵守</p>
            <p><a href="">用户协议</a>和<a href="">隐私政策</a>。</p>
        </div>
        <div>
            <button type="button" class="btn btn-primary btn-group-justified" onclick="Save()">注册</button>
        </div>
    </form>
</div>
</body>

</html>
